<template>
  <view class="con">
    <view class="main">
      <view class="top flex">
        <view class="topc topc_2" :class="type===20?'active':''" @click="tabChange(20)">补贴</view>
        <!-- <view class="topc topc_1" :class="type===10?'active':''" @click="tabChange(10)">快递</view> -->
        <view class="topc topc_1" :class="type===200?'active':''" @click="tabChange(200)">好物</view>
        <view class="topc topc_2" :class="type===30?'active':''" @click="tabChange(30)">运营</view>
        <view class="topc topc_3" :class="type===40?'active':''" @click="tabChange(40)">跨境</view>
      </view>
      <!-- 下面四个内容 -->
      <view class="wrap">
        <!-- 快递回收 -->
        <view class="hui flex flex_between" v-if="type===10">
          <view class="huili">
            <view class="huili_v1">预估收益(元)</view>
            <view class="huili_v2">{{will_left_val}}</view>
          </view>
          <view class="huili">
            <view class="huili_v1">预估数量(单)</view>
            <view class="huili_v2">{{will_right_val}}</view>
          </view>
        </view>
        <!-- 补贴专区 -->
        <view class="hui flex flex_between" v-if="type===20">
          <view class="huili">
            <view class="huili_v1">预估补贴(元)</view>
            <view class="huili_v2">{{will_left_val}}</view>
          </view>
          <view class="huili">
            <view class="huili_v1">预估收益(元)</view>
            <view class="huili_v2">{{will_right_val}}</view>
          </view>
        </view>
        <!-- 好物 -->
        <view class="hui flex flex_between" v-if="type===200">
          <view class="huili">
            <view class="huili_v1">预估补贴(元)</view>
            <view class="huili_v2">{{will_left_val}}</view>
          </view>
          <view class="huili">
            <view class="huili_v1">预估收益(元)</view>
            <view class="huili_v2">{{will_right_val}}</view>
          </view>
        </view>
        <!-- 运营 -->
        <view class="hui flex flex_between" v-if="type===30">
          <view class="huili">
            <view class="huili_v1">预估收益(元)</view>
            <view class="huili_v2">{{will_left_val}}</view>
          </view>
          <view class="huili">
            <view class="huili_v1">预估数量(单)</view>
            <view class="huili_v2">{{will_right_val}}</view>
          </view>
        </view>
        <!-- 跨境带货 -->
        <view class="hui flex flex_between" v-if="type===40">
          <view class="huili">
            <view class="huili_v1">预估收益(元)</view>
            <view class="huili_v2">0.00</view>
          </view>
          <view class="huili">
            <view class="huili_v1">预估单量(单)</view>
            <view class="huili_v2">0.00</view>
          </view>
        </view>
        <view class="datalist flex">
          <view v-for="(item,index) in datalistList" class="datalist_li flex" :key="index"
            :class="selectIndex===index?'active':''" @click="changData(index)">
            <view class="datalist_li_c">{{item.name}}</view>
            <view class="datalist_line" v-if="index<datalistList.length-1"></view>
          </view>
        </view>
        <!-- 列表（快递回收）先不显示 -->
        <view class="listM" v-if="type===10 && hasdata">
          <view class="listMt flex flex_between">
            <view class="listMtc listMtc_1">号码</view>
            <view class="listMtc listMtc_2">日期</view>
            <view class="listMtc listMtc_3">数量</view>
            <view class="listMtc listMtc_4">收益</view>
          </view>
          <view class="listMc">
            <view class="listMc_li flex flex_between" v-for="(item,index) in dataList" :key="index">
              <view class="listMc_li_t">{{item.ordernum}}</view>
              <view class="listMc_li_t">{{item.time}}</view>
              <view class="listMc_li_t">{{item.num}}</view>
              <view class="listMc_li_t2">+{{item.money}}</view>
              <!-- <view class="listMc_li_t2" :class="index===1?'huanse':''">+255.60</view> -->
            </view>
          </view>
        </view>
        <!-- 列表（补贴专区） -->
        <view class="listM" v-if="type===20 && hasdata">
          <view class="listMt flex flex_between">
            <view class="listMtc_te1 listMtc_1">订单编号</view>
            <view class="listMtc_te2 listMtc_2">日期</view>
            <view class="listMtc_te3 listMtc_3">补贴</view>
          </view>
          <view class="listMc">
            <view class="listMc_li flex flex_between" v-for="(item,index) in dataList" :key="index">
              <view class="listMc_li_t listMc_li_t_te1">{{item.ordernum}}</view>
              <view class="listMc_li_t listMc_li_t_te2">{{item.time}}</view>
              <view class="listMc_li_t2 listMc_li_t_te2">+{{item.money}}</view>
            </view>
          </view>
        </view>
        <!-- 列表（好物） -->
        <view class="listM" v-if="type===200 && hasdata">
          <view class="listMt flex flex_between">
            <view class="listMtc_te1 listMtc_1">产品名称</view>
            <view class="listMtc_te2 listMtc_2">日期</view>
            <view class="listMtc_te3 listMtc_3">补贴</view>
          </view>
          <view class="listMc">
            <view class="listMc_li flex flex_between" v-for="(item,index) in dataList" :key="index">
              <view class="listMc_li_t listMc_li_t_te1">{{item.ordernum}}</view>
              <view class="listMc_li_t listMc_li_t_te2">{{item.time}}</view>
              <view class="listMc_li_t2 listMc_li_t_te2">+{{item.money}}</view>
            </view>
          </view>
        </view>
        <!-- 列表（运营）先不显示 -->
        <view class="listM" v-if="type===30 && hasdata">
          <view class="listMt flex flex_between">
            <view class="listMtc listMtc_1">日期</view>
            <view class="listMtc listMtc_3">单量</view>
            <view class="listMtc listMtc_4">收益</view>
          </view>
          <view class="listMc">
            <view class="listMc_li flex flex_between" v-for="(item,index) in dataList" :key="index">
              <view class="listMc_li_t">{{item.time}}</view>
              <view class="listMc_li_t">{{item.num}}</view>
              <view class="listMc_li_t2">+{{item.money}}</view>
            </view>
          </view>
        </view>
        <!-- 列表（跨境带货）先不显示  -->
        <view class="listM" v-if="type===40 && hasdata ">
          <view class="listMt flex flex_between">
            <view class="listMtc listMtc_1">账号</view>
            <view class="listMtc listMtc_2">日期</view>
            <view class="listMtc listMtc_3">单量</view>
            <view class="listMtc listMtc_4">收益</view>
          </view>
          <view class="listMc">
            <view class="listMc_li flex flex_between" v-for="(item,index) in dataList" :key="index">
              <view class="listMc_li_t">{{item.ordernum}}</view>
              <view class="listMc_li_t">{{item.time}}</view>
              <view class="listMc_li_t">{{item.num}}</view>
              <view class="listMc_li_t2">+{{item.money}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getDataList //数据
  } from '@/request/api.js'
  export default {
    data() {
      return {
        openid: uni.getStorageSync('openid'), //获取缓存的openid
        //  openid:'oycWz5SBi1rMTuqdQhLy4iSvgHjU', //元辰的数据
        isLogin: uni.getStorageSync('isLogin') || 1, //是否登录授权 1是未授权；2是已授权
        type: 20, //10快递、20补贴、30运营、40跨境、200好物
        datatype: 1, //时段：1(当天)、7(近7天)、30(本月)、-30(上月)
        selectIndex: 0,
        datalistList: [{
            id: 10,
            name: '今日'
          },
          {
            id: 20,
            name: '近7日'
          },
          {
            id: 30,
            name: '本月'
          },
          {
            id: 40,
            name: '上月'
          }
        ],
        will_left_val:'',
        will_right_val:'',
        dataList:[],
        hasdata:false,
        page:1,//页码
        total:0,//总共的数量
        pagesizes:15//每页数量
      }
    },
    onLoad() {
      // this.getDataListFun()
    },
    onShow() {
      this.type = 20
      this.selectIndex = 0
      this.datatype = 1
      this.dataList = []
      this.getDataListFun()
    },
    onReachBottom() {
      let totolPage =Math.ceil(this.total / this.pagesizes) 
      console.log('总共多少页')
      console.log(totolPage)
      if(this.page<=totolPage){
        this.loadMore(); // 当上拉时加载更多数据
      }
    },
    methods: {
      // 切换类型
      tabChange(type) {
        console.log('切换最上面类型')
        console.log(type)
        this.page = 1
        this.type = type
        this.selectIndex = 0
        this.datatype = 1
        this.dataList = []
        this.getDataListFun()
      },
      // 切换日期
      changData(index) {
        console.log('切换日期')
        this.page = 1
        this.dataList = []
        this.selectIndex = index
        if (index === 0) {
          this.datatype = 1
        } else if (index === 1) {
          this.datatype = 7
        } else if (index === 2) {
          this.datatype = 30
        } else if (index === 3) {
          this.datatype = -30
        }
        this.getDataListFun()
      },
      // 加载更多
      loadMore(){
        this.page = this.page+1
        this.getDataListFun()
      },
      // 获取数据
      getDataListFun() {
        let param = {
          openid: this.openid,
          page:this.page,
          // openid: 'oycWz5flB9yZkf6Uw65uq-xzA0mA',
          type: this.type,
          datetype: this.datatype
        }
        // this.dataList = []
        // 只有补贴请求
        if(this.type!==40){
          getDataList(param).then(res=>{
            console.log('数据-返回结果')
            console.log(res)
            if(res.error_code===0){
              this.will_left_val = res.data.will_left_val
              this.will_right_val = res.data.will_right_val
              if(this.isLogin===1){
                console.log('没有登录')
                this.dataList = []
              }else{
                this.total = Number(res.data.total);
                this.pagesizes = Number(res.data.pagesizes);
                // this.dataList = res.data.arrList
                let listRe = res.data.arrList
                if(listRe.length>0){
                  this.dataList = this.dataList.concat(listRe);
                }
                if(this.dataList.length>0){
                  this.hasdata = true
                }else{
                  this.hasdata = false
                }
              }
              
            }else{
              uni.showToast({
                icon: 'none',
                title: res.msg
              })
            }
          })
        }
       
      }
    }
  }
</script>

<style scoped lang="scss">
  .con {
    .main {
      width: 100%;
      height: auto;
      // padding: 20rpx;
      box-sizing: border-box;

      .top {
        margin: 20rpx 0;
        margin-bottom: 40rpx;
        height: 64rpx;
        overflow: hidden;
        border-radius: 40rpx;
        margin-top: 20rpx;

        .topc {
          display: inline-block;
          width: 140rpx;
          height: 64rpx;
          background-color: rgba(0, 0, 0, 1);
          text-align: center;
          line-height: 64rpx;
          color: #fff;
          font-size: 28rpx;
        }

        .topc.active {
          background-color: rgba(249, 191, 65, 1);
          color: rgba(16, 16, 16, 1);
        }

        .topc_2 {
          margin: 0 2rpx;
        }

        .topc_3 {
          border-top-right-radius: 40rpx;
          border-bottom-right-radius: 40rpx;
        }
      }

      .hui {
        width: 100%;
        height: auto;

        .huili {
          width: 346rpx;
          height: 140rpx;
          border-radius: 20rpx;
          background-color: rgba(255, 255, 255, 1);
          text-align: center;

          .huili_v1 {
            color: rgba(16, 16, 16, 1);
            font-size: 28rpx;
            line-height: 40rpx;
            margin-top: 28rpx;
            margin-bottom: 4rpx;
          }

          .huili_v2 {
            line-height: 56rpx;
            color: rgba(16, 16, 16, 1);
            font-size: 40rpx;
            font-family: 'AvantGardeFont';
          }
        }
      }

      .datalist {
        border-radius: 20rpx;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
        height: 104rpx;
        width: 100%;
        margin-top: 20rpx;

        .datalist_li {
          width: 25%;
          box-sizing: border-box;
          color: rgba(137, 137, 137, 1);
          font-size: 28rpx;
          text-align: center;
        }

        .datalist_li_c {
          width: 98%;
        }

        .datalist_li.active {
          color: rgba(16, 16, 16, 1);
        }

        .datalist_line {
          width: 4rpx;
          height: 20rpx;
          background: rgba(187, 187, 187, 1);
        }
      }
    }

    .listM {
      width: 100%;
      height: auto;
      margin-top: 40rpx;

      .listMt {
        color: rgba(137, 137, 137, 1);
        font-size: 24rpx;

        .listMtc {
          width: 25%;
          text-align: center;
        }

        .listMtc_te1 {
          width: 50%;
          text-align: center;
        }

        .listMtc_te2 {
          width: 25%;
          text-align: center;
        }

        .listMtc_te3 {
          width: 25%;
          text-align: center;
        }
      }

      .listMc {
        width: 100%;
        height: auto;

        .listMc_li {
          width: 100%;
          height: 88rpx;
          border-radius: 20rpx;
          background-color: rgba(255, 255, 255, 1);
          margin-top: 20rpx;
          overflow: hidden;

          .listMc_li_t {
            color: rgba(16, 16, 16, 1);
            font-size: 24rpx;
            width: 25%;
            text-align: center;
          }

          .listMc_li_t2 {
            width: 25%;
            height: 88rpx;
            color: rgba(0, 0, 0, 1);
            font-size: 24rpx;
            line-height: 88rpx;
            background-color: rgba(211, 211, 211, 1);
            text-align: center;
          }

          .listMc_li_t.listMc_li_t_te1 {
            width: 50%;
          }

          .listMc_li_t.listMc_li_t_te2 {
            width: 25%;
          }

          .listMc_li_t2.huanse {
            background-color: rgba(249, 191, 65, 1);
          }
        }
      }
    }
  }
</style>